<template>
  <view>
    <view
      v-for="(item, index) in curOrderResData"
      :key="index"
      class="moreOrderItem"
      @click.stop="toExchangeRecordDetailFn(item.orderNo,item.orderStatus,item.exchangeType)"
    >
      <view class="status">
        <view class="plat">
          <image src="/myAccount/static/image/points_icon.png" />
          订单号：{{ item.orderNo }}
        </view>
        <text>{{ statusAllList[item.orderStatus] }}</text>
      </view>
      <view class="itemShop">
        <image :src="item.productImage" />
        <view class="shopInfo">
          <view class="title">{{ item.skuName }}</view>
          <view class="code">编码：{{ item.skuId }}</view>
          <view class="price">
            <view class="speci">
              <text class="points-num">{{ item.exchangeType == 0?item.exchangeIntegral:item.exchangeCoin }}</text><text class="points-unit">{{ item.exchangeType == 0?'积分':'鑫币' }}</text>
            </view>
            <text class="buyyer-count">×{{ item.productNumber }}</text>
          </view>
        </view>
      </view>

      <view class="btn-box">
        <view
          class="footer-button"
          @click.stop="toExchangeRecordDetailFn(item.orderNo,item.orderStatus,item.exchangeType)"
        >
          查看详情
        </view>
        <!--第三方订单不显示取消按钮 
            鸿鹄订单 待发货状态 显示取消按钮
            -->
        <view
          v-if="(item.actualStatus ==50  || item.actualStatus == 40 || item.actualStatus == 20)&& item.orderSource == 2"
          class="footer-button"
          @click.stop=" ZYCancellationFn(item)"
        >
          申请取消
        </view>
        <!-- 申请售后第三方单子申请售后  自由不能申请售后  订单来源 0:百分汇 1:自有商品-->
        <view
          v-if="item.orderStatus ==80 && item.orderSource == 0"
          class="footer-button"
          @click.stop="requestServiceFn(item)"
        >
          申请售后
        </view>
      </view>
    </view>
    <canclePop :cancle-show.sync="cancleShow" :isAfterSales.sync="isAfterSales" :cancle-params.sync="cancleParams" @cancelCom="cancelCom" />
  </view>
</template>

<script>
import { cancleOrder, applyrefund} from '@/api/orderApi';
import canclePop from '@/components/order-list/canclePop';
export default {
  components: {
    canclePop
  },
  props: {
    orderResData: {
      type: Array,
      default: () => []
    },
    modalShowClose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      newOrderResData: [],
      statusAllList: {
        '50': '待发货',
        '60': '待收货',
        '80': '已完成',
        '100': '订单取消',
        '110': '交易关闭',
        '120': '待发货（已申请取消）',
        '130': '待收货（已申请取消）',
        '140': '已完成（已申请售后）',
      },
      cancleShow: false, // 
      cancleParams: {},
      order_id:'',//自由商品取消的订单号
      actualStatus:'',//订单状态专门用来判断取消订单
      isAfterSales:false, //取消原因根据这个字段区分
    }
  },
  //操作按钮 取消订单  申请售后 确认收货
  /*
  第三方订单：不能取消订单 不显示取消订单按钮
  自有商品：待发货状态显示取消订单按钮 逻辑直接走取消售后页面
  第三方订单:已完成状态下显示申请售后
  自有商品：不能申请售后 不显示申请售后按钮
  自有商品：待收货60显示确认收货 第三方订单不能确认收货
  */
  computed: {
    curOrderResData() {
      return this.orderResData
    },
  },
  methods: {
    toExchangeRecordDetailFn(orderId, orderStatus,exchangeType) {
      console.log('点击进入111111',exchangeType)
      uni.navigateTo({ url: `/myAccount/pointsMall/exchangeRecordsDetail?orderId=${orderId}&optionorderStatus=${orderStatus}&exchangeType=${exchangeType}` })
    },
    //第三方申请取消
    // requestCancellationFn(item) {
    //   if (item.orderStatus == 2) { //待收货的走申请流程
    //     this.requestServiceFn(item)
    //   } else {
    //     this.$emit('requestCancellationFn', this.modalShowClose, item.orderSn)
    //   }
    // },
    //自由商品==鸿鹄订单 取消按钮操作
    ZYCancellationFn(item){
      this.cancleShow =true
      this.order_id =item.orderSn 
      this.actualStatus =item.actualStatus
      console.log(item)
      const { orderStatus,actualStatus,productId} = item
      const { loginAccount, memberId} = this.vuex_memberInfo
      if(actualStatus == 20){
        this.cancleParams ={cancle_order_status:actualStatus,cancle_role:10,cancle_name:loginAccount,order_id:this.order_id}
      }else{
        this.isAfterSales =true
        this.cancleParams ={
        order_id:this.order_id,
        listOrderRefundItems:[{sku_id:productId,refund_count:1}],
        return_desc:'',
        operate_role:10, 
        operate_userid: memberId,
        operate_username: loginAccount,
        actual_refund_type: 1,
      }
      }
      console.log('点击自由商品取消',this.cancleParams)
    },
    async cancelCom() { // 自有商品取消订单
      console.log('自由商品取消入参',this.cancleParams)
      const _this =this
      const res = this.actualStatus ==20 ? await cancleOrder(this.cancleParams) :  await applyrefund(this.cancleParams)
      const toast = () => this.$u.toast('取消成功')
      setTimeout(function(){
      if (res.code == 0) {
        _this.cancleShow = false
        _this.$emit('ZYinit')
        _this.cancleParams = {} // 清空选择
      } else {
        _this.$u.toast(res.message)
      }
      },5000)
    },
    //申请售后
    requestServiceFn(item) {
      uni.navigateTo({ url: `/myAccount/pointsMall/afterSalesService?orderId=${item.orderNo}&nature=${item.orderType}&orderSn=${item.orderSn}&skuId=${item.skuId}` })
    }
  }
}
</script>

<style scoped lang="scss">
.moreOrderItem {
  padding: 16rpx 24rpx;
  border-radius: $uni-border-radius-default;
  background: $uni-bg-color;
  box-sizing: border-box;
  padding-bottom: 32rpx;
  margin-top: 20rpx;
  .status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    .plat {
      color: $uni-text-color;
      font-size: $uni-font-size-sm;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      align-items: center;
      image {
        width: 80rpx;
        height: 32rpx;
        margin-right: 14rpx;
      }
    }
    .invoice-status-icon {
      width: 64rpx;
      height: 64rpx;
      float: left;
      margin-right: -50rpx;
    }
    text {
      color: $uni-orange;
    }
  }
  .itemShop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 7rpx 0rpx;
    box-sizing: border-box;
    image {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    .shopInfo {
      width: 100%;
      .title {
        color: $uni-text-color;
        font-size: $uni-font-size-base;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
      }
      .code {
        color: $uni-text-color-tips;
        font-size: $uni-font-size-sm;
        margin-top: 8rpx;
      }
      .price {
        display: flex;
        justify-content: space-between;
        color: $uni-text-color-tips;
        margin-top: 8rpx;
        .speci {
          display: flex;
          color: $uni-text-color;
          font-size: $uni-font-size-base;
          .points-num {
            color: $uni-orange;
            font-weight: bold;
          }
          .points-unit{
            color: $uni-text-color-tips;
          }
        }
        .buyyer-count{
          font-size:  $uni-font-size-sm;
        }
      }
    }
  }
  .btn-box{
    margin-top: 20rpx;
    overflow: hidden;
    .footer-button {
      width: 140rpx;
      height: 48rpx;
      border-radius: $uni-border-radius-default;
      border: 2rpx solid #DEDEDE;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      float: right;
      margin-left: 12rpx;
    }
  }
}
</style>
